import 'package:flutter/material.dart';

main() => runApp(MyApp());

/* 
* Widget
* 有状态的Widget：StatefulWidget 运行中有一些状态（data）需要改变
* 无状态的Widget: StatelessWidget 内容是确定的，没有数据的改变
 */

// 生成代码快捷键  stl
class MyApp extends StatelessWidget {
  // build
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GLHomePage(),
    );
  }
}

class GLHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("电影目录"),
      ),
      body: GLHomeContent(),
    );
  }
}

// 计数器 有状态改变
// Widget是不加下划线_的，暴露给别人使用
class GLHomeContent extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _GLHomeContentState();
  }
}

/* 
* 为什么Flutter在设计的时候，StatefulWidget的build方法放在State中
* 1、build出来的widget是需要依赖State中变量（状态/数据）
* 2、在flutter的运行过程中：
*     widget是不断地销毁和创建的，
*     当我们自己的状态发生改变时候，并不希望重新创建一个新的State
 */
// State加下划线_:状态这个类只给widget使用
class _GLHomeContentState extends State<GLHomeContent> {
  int _counter = 0;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          _getButtons(),
          Text("当前计数：$_counter", style: const TextStyle(fontSize: 25))
        ],
      ),
    );
  }

  // 抽取组件 widget
  Widget _getButtons() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center, // 居中按钮
      mainAxisSize: MainAxisSize.min, // 尽可能小的宽度以适应内容
      children: [
        ElevatedButton(
          // button 1
          child: Text(
            'Add', // 设置按钮文本
            style: TextStyle(
              fontSize: 20, // 字体大小设置为20，你可以根据需要调整
            ),
          ),
          onPressed: () {
            // 点击按钮时执行的代码
            setState(() {
              _counter++;
            });
          },
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.resolveWith<Color>(
              (Set<MaterialState> states) {
                if (states.contains(MaterialState.pressed)) {
                  return Colors.blue.withOpacity(0.7); // 按下时的颜色
                }
                return Colors.blue; // 默认颜色
              },
            ),
          ),
        ),
        SizedBox(width: 16), // 添加间距，你可以根据需要调整这个值
        ElevatedButton(
          // button 2
          child: Text(
            'Increase', // 设置按钮文本
            style: TextStyle(
              fontSize: 20, // 字体大小设置为20，与第一个按钮一致
            ),
          ),
          onPressed: () {
            // 点击按钮时执行的代码
            setState(() {
              _counter--;
            });
          },
          style: ButtonStyle(
            backgroundColor:
                MaterialStateProperty.all<Color>(Colors.green), // 始终使用绿色
          ),
        ),
      ],
    );
  }
}
